<template>
  <view>
    <map :style="mapStyle" :show-location="true"></map>
    <view class="location-btn" @click="getLocation">定位</view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        mapStyle: {
          width: '100%',
          height: '100vh'
        }
      };
    },
    methods: {
      getLocation() {
        uni.getLocation({
          type: 'gcj02',
          success: res => {
            const { latitude, longitude } = res;
            this.$refs.mapCtx.includePoints({
              points: [
                { latitude, longitude }
              ]
            });
          },
          fail: err => {
            uni.showToast({
              title: '定位失败',
              icon: 'none'
            });
          }
        });
      }
    }
  };
</script>

<style>
  .location-btn {
    position: fixed;
    bottom: 20rpx;
    right: 20rpx;
    background-color: #007AFF;
    color: #fff;
    width: 100rpx;
    height: 40rpx;
    text-align: center;
    line-height: 40rpx;
    border-radius: 5rpx;
  }
</style>